Windows Presentation Foundation

Zobrazení obrázku

Obrázek je možné zobrazit pomocí elementu Image. Tento element má atribut Source pro určení cesty k obrázku. Podporované formáty obrázku jsou například: gif, jpg, png, bmp a další.

Zobrazení obrázku
<Image Source="zapad_slunce.jpg" Width="450" Height="350"/>
Source – cesta k souboru obrázku (např. Obrazky/nazev_obrazku.jpg)
Width a Height – nastavují šířku a výšku elementu Image
Ukázkové řešení: Media/ZobrazeniObrazku

Element Image má atribut Stretch pro nastavení zobrazení obrázku. Pokud obrázek bude mít jinou velikost než element Image, zobrazení se upraví pomocí tohoto atributu. Tento element má čtyři nastavení a to None, Uniform, UniformToFill a Fill. Na Obrázku 1 si můžete prohlédnout jednotlivá nastavení. [zdroj Fotky: http://openphoto.net/gallery/image.html?image_id=15458&hints=#how_to_credit_this_image-]

Možnosti nastavení atributu Stretch u Image
Obrázek 1 Možnosti nastavení atributu Stretch u Image [zdroj: vlastní, zdroj fotky: http://openphoto.net]
Ukázkové řešení: Media/Stretch

U obrázku je také možné změnit formát. Je tak možné například upravit obrázek na stupně šedi. Pro změnu formátu obrázku slouží element FormatConvertedBitmap. Tento element se použije pro načtení obrázku a umístí se do atributu Source elementu Image.

Změna formátu obrázku
<Image>
 <Image.Source>

     <FormatConvertedBitmap Source="zapad_slunce.jpg"
                            DestinationFormat="Gray32Float"/>
                   
 </Image.Source>

</Image>
FormatConvertedBitmap – načte obrázek a změní mu formát
Source – umístění souboru obrázku
DestinationFormat – cílový formát obrázku
Gray32Float – stupně šedi
Na Obrázku 2 je zobrazen původní a upravený obrázek.
Původní a upravený obrázek ve stupních šedi
Obrázek 2 Původní a upravený obrázek ve stupních šedi [zdroj: vlastní, zdroj fotky: http://openphoto.net]
Ukázkové řešení: Media/StupneSedi

Obrázek lze také rotovat o přírůstky 90 stupňů. Stejně jako u změny formátu obrázku se použije další element pro načtení. Pro rotaci se použije element TransformedBitmap. Tento element má atribut Transform pro nastavení transformace.

Rotace obrázku
<TransformedBitmap Source="zapad_slunce.jpg">
        <TransformedBitmap.Transform>
             <RotateTransform Angle="90"/>
        </TransformedBitmap.Transform>
</TransformedBitmap>
TransformedBitmap – transformování obrázku
Transform – slouží pro nastavení obrázku
RotateTransform – rotuje s obrázkem o přírůstky 90 stupňů (90,180,270)
Na Obrázku 38 je ukázka rotace obrázku o 90 stupňů.
Rotace obrázku o 90 stupňů
Obrázek 3 Rotace obrázku o 90 stupňů [zdroj: vlastní, zdroj fotky: http://openphoto.net]
Ukázkové řešení: Media/RotaceObrazku